<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org" th:replace="~{layout :: html}">
<head>
    <title th:text="${pageTitle} + ' - 用户管理系统'">用户表单 - 用户管理系统</title>
</head>
<body>
    <div th:fragment="content">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0" th:text="${pageTitle}">用户表单</h5>
                    </div>
                    <div class="card-body">
                        <form th:action="@{/user/save}" th:object="${user}" method="post">
                            <!-- 隐藏字段，用于区分新增和编辑 -->
                            <input type="hidden" th:field="*{id}">
                            
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="name" class="form-label">用户名 <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control" id="name" th:field="*{name}" 
                                               placeholder="请输入用户名" required>
                                        <div class="invalid-feedback">
                                            请输入用户名
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="email" class="form-label">邮箱 <span class="text-danger">*</span></label>
                                        <input type="email" class="form-control" id="email" th:field="*{email}" 
                                               placeholder="请输入邮箱" required>
                                        <div class="invalid-feedback">
                                            请输入有效的邮箱地址
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="age" class="form-label">年龄</label>
                                        <input type="number" class="form-control" id="age" th:field="*{age}" 
                                               placeholder="请输入年龄" min="1" max="150">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="phone" class="form-label">电话</label>
                                        <input type="tel" class="form-control" id="phone" th:field="*{phone}" 
                                               placeholder="请输入电话号码">
                                    </div>
                                </div>
                            </div>

                            <div class="mb-3">
                                <label for="address" class="form-label">地址</label>
                                <textarea class="form-control" id="address" th:field="*{address}" 
                                          rows="3" placeholder="请输入地址"></textarea>
                            </div>

                            <div class="mb-3">
                                <label for="remark" class="form-label">备注</label>
                                <textarea class="form-control" id="remark" th:field="*{remark}" 
                                          rows="3" placeholder="请输入备注信息"></textarea>
                            </div>

                            <div class="d-flex justify-content-between">
                                <a th:href="@{/user/list}" class="btn btn-secondary">
                                    <i class="fas fa-arrow-left"></i> 返回列表
                                </a>
                                <div>
                                    <button type="reset" class="btn btn-outline-secondary me-2">
                                        <i class="fas fa-undo"></i> 重置
                                    </button>
                                    <button type="submit" class="btn btn-primary">
                                        <i class="fas fa-save"></i> 保存
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script th:fragment="scripts">
        // 表单验证
        (function() {
            'use strict';
            window.addEventListener('load', function() {
                var forms = document.getElementsByClassName('needs-validation');
                var validation = Array.prototype.filter.call(forms, function(form) {
                    form.addEventListener('submit', function(event) {
                        if (form.checkValidity() === false) {
                            event.preventDefault();
                            event.stopPropagation();
                        }
                        form.classList.add('was-validated');
                    }, false);
                });
            }, false);
        })();

        // 实时验证
        document.getElementById('email').addEventListener('blur', function() {
            const email = this.value;
            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if (email && !emailRegex.test(email)) {
                this.setCustomValidity('请输入有效的邮箱地址');
            } else {
                this.setCustomValidity('');
            }
        });

        document.getElementById('age').addEventListener('blur', function() {
            const age = parseInt(this.value);
            if (age && (age < 1 || age > 150)) {
                this.setCustomValidity('年龄必须在1-150之间');
            } else {
                this.setCustomValidity('');
            }
        });
    </script>
</body>
</html>
